{% extends 'topic/master.html' %}
{% block CSS %}
<style>
    .topic_buttons {
        padding: 5px;
        font-size: 14px;
        line-height: 120%;
        background: #eeeeee;
        border-radius: 0px 0px 3px 3px;
        text-align: left;
    }
    .topic_content img {
        max-width: 100% !important;
    }
    a.tb {
        background-color: #eeeeee;
    }
    .fr {
        float: right;
        text-align: right;
    }
    img.avatar {
        -moz-border-radius: 4px;
        border-radius: 4px;
    }
    .transparent {
        background-color: transparent;
        border: 2px dashed rgba(0, 0, 0, 0.1);
        border-radius: 3px;
        box-shadow: none;
    }
    .vote:link, .vote:visited, .vote {
        text-decoration: none;
        font-size: 10px;
        line-height: 1;
        padding: 2px 8px 2px 8px;
        border: 1px solid #e2e2e2;
        border-radius: 3px;
        color: #778;
        display: inline-block;
        vertical-align: baseline;
        text-align: center;
    }
    .header {
        padding: 10px;
        font-size: 15px;
        line-height: 120%;
        text-align: left;
        border-bottom: 1px solid #e2e2e2;
        overflow: auto;
    }
    h1 {
        font-size: 24px;
        font-weight: 500;
        line-height: 150%;
        margin: 0px 0px 10px 0px;
        padding: 0px;
    }
    a:active {
        color: #778087;
        text-decoration: none;
        word-break: break-all;
    }
    .votes {
        display: inline-block;
    }
    .gray {
        color: #999;
    }
    .ago {
        font-size: 11px;
        color: #ccc;
        cursor: pointer;
    }
    .mll {
        border-radius: 3px;
        padding: 5px;
        font-size: 14px;
        border: 1px solid #ccc;
        display: block;
        width: 100%;
        height: 8em;
        overflow-y: auto;
        resize: vertical;
        box-sizing: border-box;
    }
</style>
{% endblock %}
{% block main %}
    <div class="box" style="border-bottom: 0px;">
        <div class="header">
            <div class="fr">
                <a href="{% url 'member' topic_obj.author.username  %}">
                    <img src="{{ topic_obj.author.avatar }}" class="rounded avatar" border="0"
                         align="default">
                </a>
            </div>
            <a href="{% url 'index' %}">V2EX</a> <span class="chevron">&nbsp;›&nbsp;</span> <a href="{% url 'node' topic_obj.category.code %}">{{ topic_obj.category.name }}</a>
            <div class="sep10"></div>
            <h1>{{ topic_obj.title|safe }}</h1>
            <div id="topic_votes" class="votes">
                <a href="javascript:" onclick="upVoteTopic('{{ topic_obj.topic_sn }}');" class="vote">
                    <li class="fa fa-chevron-up">&nbsp;{{ topic_obj.like_num }}</li>
                </a> &nbsp;
                <a href="javascript:" onclick="downVoteTopic('{{ topic_obj.topic_sn }}');" class="vote">
                    <li class="fa fa-chevron-down">&nbsp;{{ topic_obj.dislike_num }}</li>
                </a>
            </div> &nbsp;
            <small class="gray"><a href="{% url 'member' topic_obj.author.username  %}">{{ topic_obj.author.username }}</a> · {{ topic_obj.add_time }} · {{ topic_obj.click_num }} 次点击</small>
        </div>
        <div class="cell">
            <div class="topic_content">
                {{ topic_obj.markdown_content | safe }}
            </div>
        </div>
        {% if request.session.user_info %}
            <div class="topic_buttons">
                <div class="fr gray f11" style="line-height: 12px; padding-top: 3px; text-shadow: 0px 1px 0px #fff;">{{ topic_obj.click_num }} 次点击 &nbsp;∙&nbsp; {{ topic_obj.favorite_num }} 人收藏 &nbsp; </div>
                <div class="action-buttons">
                    {% if topic_obj.favorite.0 == 1 %}
                        <a id="favorite" class="badge badge-pill badge-light tb" href="#;" onclick="favoriteTopic('{{ topic_obj.topic_sn }}')">&nbsp;取消收藏&nbsp;</a> &nbsp;
                    {% else %}
                        <a id="favorite" class="badge badge-pill badge-light tb" href="#;" onclick="favoriteTopic('{{ topic_obj.topic_sn }}')">&nbsp;加入收藏&nbsp;</a> &nbsp;
                    {% endif %}
                    {% if topic_obj.author_id != request.session.user_info.uid %}
                        {% if topic_obj.thanks.0 == 1 %}
                            <a id="thanks" href="#;" class="badge badge-pill badge-light tb" disabled="disabled">&nbsp;已经发送感谢&nbsp;</a>
                        {% else %}
                            <a id="thanks" href="#;" class="badge badge-pill badge-light tb"
                               onclick="if (confirm('你确定要向本主题创建者发送谢意？')) { thankTopic('{{ topic_obj.topic_sn }}'); }">&nbsp;感谢&nbsp;</a>
                        {% endif %}
                    {% endif %}
                </div>
            </div>
        {% endif %}
    </div>
    <div class="sep20"></div>
    {% if comments_obj %}
        <div class="box">
            <div class="cell">
                <span class="gray">{{ comments_obj.count }} 个回复 &nbsp;<strong
                        class="snow">|</strong> &nbsp;直到 {{ now }}</span>
            </div>
            {% for obj in comments_obj %}
                <div class="cell">
                    <table cellpadding="0" cellspacing="0" border="0" width="100%">
                        <tbody>
                        <tr>
                            <td width="48" valign="top" align="center"><img
                                    src="{{ obj.author.avatar }}" class="avatar" style="max-width: 48px; max-height: 48px;" border="0"
                                    align="default"></td>
                            <td width="10" valign="top"></td>
                            <td width="auto" valign="top" align="left">
                                <div class="fr">
                                    {% if request.session.user_info %}
                                        <div id="thank_area_{{ obj.id }}" class="thank_area">

                                            <a href="#;"
                                               onclick="if (confirm('确认要不再显示来自 @{{ obj.author.username }} 的这条回复？')) { ignoreReply('{{ obj.id }}'); }"
                                               class="thank" style="color: #ccc;">隐藏</a>
                                            &nbsp; &nbsp; &nbsp; <a href="#;"
                                                                    onclick="if (confirm('确认花费 10 个铜币向 {{ obj.author.username }} 的这条回复发送感谢？')) { thankReply('{{ obj.author.id }}');}"
                                                                    class="thank">感谢回复者</a></div> &nbsp; <a href="#;"
                                                                                                            onclick="replyOne('xinzhi');"><img
                                            src="/static/img/reply.png" align="absmiddle" border="0" alt="Reply"></a>
                                    {% endif %}
                                    &nbsp;&nbsp; <span
                                        class="badge badge-pill badge-secondary">{{ forloop.counter }}</span></div>
                                <div class="sep3"></div>
                                <strong><a href="{% url 'member' obj.author.username %}"
                                           class="dark">{{ obj.author.username }}</a></strong>&nbsp; &nbsp;<span
                                    class="ago">{{ obj.add_time }}</span>
                                <div class="sep5"></div>
                                <div class="reply_content">{{ obj.content|safe }}</div>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            {% endfor %}
        </div>
    {% else %}
        <div class="box transparent">
            <div class="inner" style="text-align: center">
                <span style="color: rgba(0, 0, 0, 0.25);">目前尚无回复</span>
            </div>
        </div>
    {% endif %}
    {% if request.session.user_info %}
        <div class="sep20"></div>
        <div class="box">
            <div class="cell">
                <div class="fr"><a href="#" onclick="goTop()"><strong>↑</strong> 回到顶部</a></div>
                添加一条新回复
            </div>
            <div class="cell">
                <form method="post" action="{% url 'topic' topic_sn %}">
                {% csrf_token %}
                <textarea name="content" maxlength="10000" class="mll" id="reply_content"
                          style="overflow: hidden; word-wrap: break-word; resize: none; height: 112px;"></textarea>
                    <div class="sep10"></div>
                    <div class="fr">
                        <div class="sep5"></div>
                        <span class="gray">请尽量让自己的回复能够对别人有帮助</span></div>
                    <input type="hidden" value="10476" name="once">
                    <input type="submit" value="回复" class="btn btn-sm">
{#                    <script type="text/javascript">#}
{#                        $("#reply_content").on('input', function (e) {#}
{#                            saveReplyDraft(435882, 94579);#}
{#                        });#}
{#                        var keyPressed = 0;#}
{#                        $("#reply_content").keydown(function (e) {#}
{#                            keyPressed = keyPressed + 1;#}
{#                            if ((e.ctrlKey || e.metaKey) && e.which === 13) {#}
{#                                e.preventDefault();#}
{#                                $("#reply_content").parent().submit();#}
{#                            }#}
{#                        });#}
{#                    </script>#}
                </form>
            </div>
            <div class="inner">
                <div class="fr"><a href="{% url 'index' %}">← V2EX</a></div>
                &nbsp;
            </div>
        </div>
    {% endif %}
{% endblock %}

{% block JS %}
<script>
    function upVoteTopic(topic_sn) {
        if ($.cookie('csrftoken')) {
            $.ajax({
                url: '/topic/vote?t=' + $.cookie('csrftoken'),
                type: 'post',
                data: {'topic_sn': topic_sn, 'vote_action': 'up'},
                success: function (recv) {
                    recv = JSON.parse(recv);
                    if (recv.changed) {
                        console.log('成功');
                        $('#topic_votes').html(recv.data);
                        location.reload();
                    } else {
                        console.log('失败')
                    }
                },
                error: function () {
                    console.log('请求失败')
                }
            })
        }

    }

    function downVoteTopic(topic_sn) {
        if ($.cookie('csrftoken')) {
            $.ajax({
                url: '/topic/vote?t=' + $.cookie('csrftoken'),
                type: 'post',
                data: {'topic_sn': topic_sn, 'vote_action': 'down'},
                success: function (recv) {
                    recv = JSON.parse(recv);
                    if (recv.changed) {
                        console.log('成功');
                        $('#topic_votes').html(recv.data);
                        location.reload();
                    } else {
                        console.log('失败')
                    }
                },
                error: function () {
                    console.log('请求失败')
                }
            })
        }

    }

    function favoriteTopic(topic_sn) {
        $.ajax({
            url: '/topic/favorite?t=' + $.cookie('csrftoken'),
            type: 'post',
            data: {'topic_sn': topic_sn},
            success: function (recv) {
                recv = JSON.parse(recv);
                if (recv.changed) {
                    console.log('成功');
                    $('#favorite').html(recv.data);
                    location.reload();
                } else {
                    console.log('失败')
                }
            },
            error: function () {
                console.log('请求失败')
            }
        })
    }

    function thankTopic(topic_sn) {
        if($('#thanks').html() === '已经发送感谢'){
            return
        }
        $.ajax({
            url: '/topic/thanks?t=' + $.cookie('csrftoken'),
            type: 'post',
            data: {'topic_sn': topic_sn},
            success: function (recv) {
                recv = JSON.parse(recv);
                if (recv.changed) {
                    console.log('成功');
                    $('#thanks').html(recv.data).attr('onclick', '').addClass('gray');
                    location.reload();
                }
            },
            error: function () {
                console.log('请求失败')
            }
        })
    }

</script>
{% endblock %}